
<template>
  <el-card class="edit-main-box">
    <el-form :disabled="type === 'detail'" ref="form" :model="ruleForm" :rules="rules" style="width: 700px"
      label-position="right" label-width="100px">
      <el-form-item label="标题" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入" maxlength="50" />
      </el-form-item>
      <el-form-item label="类型" prop="page">
        <div class="flex-row">
          <Select v-model="ruleForm.page" class="flex1" :list="lst_cate" label-field="name" value-field="id"
            :show-all="false" />
          <i class="el-icon-circle-plus" @click="addCate" />
        </div>
      </el-form-item>
    </el-form>
    <Page :type="type" ref="page" :content="ruleForm.content" />
    <el-button v-if="type !== 'detail'" class="mt10" type="primary" @click="onSubmit">保 存</el-button>
  </el-card>
</template>

<script>
import { getCateList, addPage, getPageDetail, editPage } from '@/api/index'
import Select from '@/components/Select/index.vue'
import Page from '@/views/components/page.vue'
export default {
  name: 'AddPage',
  components: { Select, Page },
  props: {
    /** 类型  14新闻 15下载 16媒体 */
    type: {
      type: String,
      default: '14'
    }
  },
  data() {
    return {
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        page: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      lst_cate: [],
      id: null,
      type: 'add'
    }
  },
  async created() {
    this.getCate()
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.type = this.$route.query.type || 'add'
      let res = await getPageDetail({ id: this.$route.query.id })
      this.ruleForm = res.data
      this.ruleForm.content = JSON.parse(this.ruleForm.content)
    }
  },
  methods: {
    async getCate() {
      const res = await getCateList({ pid: this.type })
      this.lst_cate = res.data || []
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    addCate() {
      this.$prompt('请输入类型名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        await addCate({ pid: this.type, name: value })
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.getCate()
      })
    },
    async onSubmit() {
      await this.$refs.form.validate()
      let content = await this.$refs.page.getContainer()
      let formData = new FormData()
      formData.append('name', this.ruleForm.name)
      formData.append('page', this.ruleForm.page)
      formData.append('content', JSON.stringify(content || ''))
      this.id !== null && formData.append('id', this.id)
      let fetchApi = this.id !== null ? editPage : addPage
      await fetchApi(formData)
      this.$message({
        type: 'success',
        message: '成功'
      })
      this.id === null && this.$router.push('/pages')
    }
  }
}
</script>
<style lang="scss">
.edit-main-box {
  .add-box {
    background-color: #2d82f8;
  }

  .el-icon-circle-plus {
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
    color: #409eff;
  }
}
</style>
